What is the state and props? How are they different?

State of a component is an object that holds some information that may change over the lifetime of the component. The state is reactive data specific to an component. We should always try to make our state as simple as possible and minimize the number of stateful components.

javascript

Props (short for properties) define the Component's configuration.

1
Props are inputs to a React component.
2
Props are properties that are passed into a child component from its parent, and are read-only/ immutable.
3
They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.
4
Props do not have to just be data - callback functions may be passed in as props.
5
They are used to control data used by a child component from parent in the component tree.

Differences:

1
Props are received from above, from parent component while state is managed by component itself
2
Props can not be updated by the component consuming it they are immutable while state can be updated by the component consuming it

Difficulty: 5/10

Topics: state management, props passing, component design

Scenario Questions

0-2 years experience

1
You need a Counter component that shows a number and a button to increment it. How would you use state and props to build this?
2
If a parent component passes a prop to a child and then re‑renders, what happens to the child's prop values?
3
What would be the result of trying to assign a new value to a prop inside a functional component?

2-5 years experience

1
You lifted the count state up to a parent so two sibling components can share it, but one sibling isn’t updating when the button is clicked. How would you debug this?
2
When converting a class component that uses this.state to a functional component with useState, what changes are required for handling props?
3
Explain the trade‑offs between keeping UI state inside a component versus lifting it to a common ancestor.

5-8 years experience

1
In a dashboard with dozens of widgets, how do you decide which data lives in component state and which is passed down as props from a global store?
2
A component receives a large immutable prop object that changes on every fetch. What performance concerns arise and how would you address them?
3
Design a pattern to keep two sibling components in sync without prop‑drilling the state through multiple layers.

8+ years experience

1
Your organization is migrating a legacy codebase from class components to functional components with hooks. How would you refactor state and props usage to minimize regression risk?
2
When creating a shared component library used by multiple product teams, what guidelines would you set for using internal state versus controlled props?
3
In a micro‑frontend architecture, how does passing frequently changing data via props affect bundle size and caching, and what strategies can mitigate the impact?

Follow-up Questions

❓Can you walk me through a case where you’d prefer lifting state up versus keeping it local?
❓What happens if a component mutates its props directly?
❓How does React decide whether to re‑render a component when state or props change?